import styled from 'styled-components'

const AppTabBarbox= styled.div`
    width:100%;
    height:.52rem;
    background:#fff;
    position:fixed;
    bottom:0;
    left:0;
    display:flex;
    

`
const TabbarHome = styled.div`
    width:25%;
    height:100%;
    a{
        width:100%;
        height:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }

    img{
       height:0.25rem;
       width:.25rem;
    }
    
    i{
        font-size:0.12rem;
        color:#333;
    }
`


const TabberSelect = styled.div`
 width:25%;
    height:100%;
    a{
        width:100%;
        height:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    
    img{
       height:0.25rem;
       width:.25rem;
    }

    i{
        font-size:0.12rem;
        color:#333;
    }
`

const TabberShopcar = styled.div`
 width:25%;
    height:100%;
    a{
        width:100%;
        height:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    
    img{
       height:0.25rem;
       width:.25rem;
    }

    i{
        font-size:0.12rem;
        color:#333;
    }
`


const TabberMine = styled.div`
 width:25%;
    height:100%;
    a{
        width:100%;
        height:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    
    img{
       height:0.25rem;
       width:.25rem;
    }

    i{
        font-size:0.12rem;
        color:#333;
    }
`

export {
    AppTabBarbox,
    TabbarHome,
    TabberSelect,
    TabberShopcar,
    TabberMine
}